<template>
  <div>
    <video ref="videoPlayer" class="video-js vjs-big-play-centered"></video>
  </div>
</template>

<script>
const defaultOptions = {
  autoplay: true, //自动播放
  controls: true, //用户可以与之交互的控件
  loop: false, //视频一结束就重新开始
  muted: false, //默认情况下将使所有音频静音
  aspectRatio: "16:9", //显示比率
  preload: "auto",
  fullscreen: {
    options: { navigationUI: "hide" },
  },
  sources: [],
};
export default {
  props: {
    // options: {
    //   type: Object,
    //   default() {
    //     return {};
    //   },
    // },
    src: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      options: {
        autoplay: true, //自动播放
        controls: true, //用户可以与之交互的控件
        loop: false, //视频一结束就重新开始
        muted: false, //默认情况下将使所有音频静音
        aspectRatio: "16:9", //显示比率
        preload: "auto",
        fullscreen: {
          options: { navigationUI: "hide" },
        },
        sources: [
          {
            src: this.src,
            type: "video/mp4",
          },
        ],
      },
      player: null,
    };
  },
  mounted() {
    this.player = this.$video(this.$refs.videoPlayer, this.options);
  },
  watch: {
    src: function (newValue) {
      this.player.src(newValue);
    },
  },
  methods: {
    beforeDestroy() {
      if (this.player) {
        this.player.dispose();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>